<template>
	<view class="outBox">
		<u-navbar leftText="订单详情" leftIconColor="#fff" :autoBack="true" bgColor="rgba(0, 0, 0, 0.6)">
			<view class="left-slot" slot="left">
				<u-icon name="arrow-left" color="#fff"></u-icon>
				<text>{{ '订单详情' }}</text>
			</view>
		</u-navbar>

		<view class="bgBox"></view>
		<video :src="videoUrl + '/mp4/1.mp4'" autoplay :controls="false" loop object-fit="cover"></video>
		<view class="innerBox">
			<view class="content" :style="{
			marginTop:menuHeight + 'px',
		}">
				<view class="items">
					<view class="item" v-for="item in dataList" :style="{
              backgroundImage:`url(${bg})`
            }">
						<image :src="item.relaPicPath" mode=""></image>
						<view class="info">
							<view class="title">
								<text>{{ item.relaName }}</text>
							</view>
							<view class="price">
								<text>¥ {{ item.unitPrice }}</text>
								<view class="operation">
									<!-- 			<u-icon name="minus-circle" color="#f96f45" v-if="item.choiceNum > 0"
                    @click="handleDecrease(item)"></u-icon> -->
									<text>数量：{{ item.orderNum }}</text>
									<!-- 			<u-icon name="plus-circle" color="#f96f45" size="22"
                    @click="handleIncrease(item)"></u-icon> -->
								</view>
							</view>
						</view>
					</view>

				</view>

				<view class="inputOut">
					<view class="inputBox">
						<view class="label">
							<text>备注</text>
						</view>
						<view class="value">
							<u--input placeholder="请输入备注" border="surround" v-model="remark" color="#fff"
								inputAlign="right" type="textarea"></u--input>
						</view>
					</view>
					<view class="inputBox">
						<view class="label">
							<text>桌号</text>
						</view>
						<view class="value">
							<text>{{ counterNo }}</text>
						</view>
					</view>
				</view>

			</view>
			<view class="footer">
				<view class="left">
					<view class="price">
						<text>¥ {{ getCartInfo().price }}</text>
					</view>
				</view>
				<view class="btns">
					<view class="btnOut btn1">
						<view class="btn" @click="handlePay">
							<text>立即支付</text>
						</view>
					</view>
					<!-- <view class="btnOut">
						<view class="btn" @click="handleSuc">
							<text>去结算</text>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<diaBox ref="diaBoxRef" title="下单成功" content="请等待服务员确认并结算" @comfireFunc="handleBack" :show-btns="true"
			:show-cancel="false" />

		<diaBox ref="diaBoxRef2" title="结账" @comfireFunc="confirmPay" :show-btns="true" :show-cancel="true">
			<template #dia-cont>
				<view class="price-text">需要支付<text>{{needPrice}}</text>元</view>
			</template>
		</diaBox>
	</view>
</template>

<script>
	import {
		getWXStatusHeight
	} from '@/utils/index.js'

	import {
		addCounterOrderFlowDetailForWx,
		findMyCartForWxApi,
		cartWxPay
	} from '../../api/api'
	import bg from "@/static/mine/bg2.png";
	import diaBox from "@/components/diaBox/index.vue";

	export default {
		components: {
			diaBox
		},
		data() {
			return {
				// 胶囊的宽度
				barWidth: 0,
				menuHeight: 0,
				dataList: [],
				videoUrl: this.$videoUrl,
				remark: '', //备注
				counterNo: "", // 坐号
				bg: bg,
				sendMsgObj: "",
				realList: [], // 包含套餐的数据
				needPrice: '', // 需要支付的金额
				isCanPay:true, // 是否可以支付
			}
		},
		onLoad(e) {
			let obj = getWXStatusHeight()
			this.barWidth = obj.barWidth + 3
			this.menuHeight = obj.menuHeight
			// this.dataList = uni.getStorageSync("choiceDataList")

			if (e.counterNo) {
				this.counterNo = e.counterNo
			}

			this.sendMsgObj = uni.getStorageSync("sendMsgObj")
			this.findMyCartForWx()
		},
		methods: {
			async findMyCartForWx() {
				const res = await findMyCartForWxApi(this.sendMsgObj)
				if (res.code == 200) {
					// 包含套餐数据
					this.realList = res.data.counterOrderFlowDetailList
					// 真实数据
					this.dataList = res.data.counterOrderFlowDetailList.filter(item => item.serviceId == -1)
				}
			},
			handleBack() {
				this.$refs.diaBoxRef.close()
				uni.navigateBack()
			},
			// 获取购物车信息
			getCartInfo() {
				const obj = {
					num: 0,
					price: 0
				}
				this.dataList.forEach(item => {
					obj.num += item.orderNum
					obj.price += item.orderNum * item.unitPrice
				})

				obj.price = obj.price.toFixed(2)
				return obj
			},
			// 真实支付
			handlePay() {
				const arrPrice = this.dataList.map(item => item.totalPrice)
				const sum = arrPrice.reduce((a, b) => a + b, 0);
				this.needPrice = sum
				this.$refs.diaBoxRef2.show = true
			},
			// 继续支付
			async confirmPay() {
				if(!this.isCanPay) return
				this.isCanPay = false
				const arrPrice = this.dataList.map(item => item.totalPrice)
				const sum = arrPrice.reduce((a, b) => a + b, 0);


				const data = {
					"counterDetailId": this.sendMsgObj.counterDetailId,
					"counterNo": this.sendMsgObj.counterNo,
					counterOrderFlowDetailList: this.dataList.map(item => {
						return {
							relaType: item.relaType,
							relaId: item.relaId,
							orderNum: item.orderNum,
							unitPrice: item.unitPrice,
							serviceId: item.serviceId,
							totalPrice: item.totalPrice
						}
					}),
					"counterOrderNo": this.sendMsgObj.counterOrderNo,
					"totalAmount": sum
				}

				const res = await cartWxPay(data)
				console.log(res, "res");
				if (res.code === 200) {
					this.systemWxPay(res.data)
				}
			},
			// 拉起微信支付
			systemWxPay(data) {
				const _this = this
				const obj = data.jspackage
				wx.requestPayment({
					...obj,
					success(res) {
						console.log(res, "res");
						if (res.errMsg == "requestPayment:ok") {
							_this.getnav('/pages/order/paySuc/paySuc')
							this.payLoading = false
						}
						this.isCanPay = true
					},
					fail(err) {
						_this.payLoading = false
						this.isCanPay = true
					}
				})
			},
			// 支付
			async handleSuc() {
				const data = {
					counterOrderFlowDetailList: this.dataList.map(item => {
						return {
							relaType: item.relaType,
							relaId: item.relaId,
							orderNum: item.orderNum,
							unitPrice: item.unitPrice,
						}
					}),
					counterNo: this.counterNo //卡台编号
				}
				const res = await addCounterOrderFlowDetailForWx(data)
				if (res.code == 200) {
					uni.removeStorageSync("choiceDataList")
					// this.$toast("下单成功")
					this.$refs.diaBoxRef.show = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.price-text {
		text-align: center;
		margin-top: 20rpx;
		color: #fff;

		text {
			color: #0FC6C2;
			margin: 0 5rpx;
		}
	}

	.price-name {
		text-align: center;
		color: #fff;
	}

	.btns {
		display: flex;
	}

	.btn1 {
		margin-right: 20rpx;
	}

	.inputOut {
		background: rgba(0, 0, 0, 0.22);
		border-radius: 60rpx;
		border: 2rpx solid #273232;
		backdrop-filter: blur(7px);
	}

	.bgBox {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 1;
		background: rgba(0, 0, 0, 0.6);
	}

	.innerBox {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 180rpx;
		padding: 0 46rpx;
		position: relative;
		z-index: 9;
		background: rgba(0, 0, 0, 0.6);
		border-image: linear-gradient(164deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.16)) 2 2;

		.left {
			display: flex;

			.price {
				font-size: 36rpx;
				display: flex;
				align-items: center;

				text {
					font-weight: 500;
					font-size: 41rpx;
					color: #FFFFFF;
					line-height: 59rpx;
					text-align: left;
					font-style: normal;
				}
			}

			.cart {
				position: relative;

				.circle {
					position: absolute;
					right: 0;
					top: 0;
					width: 26rpx;
					height: 26rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					text {
						font-size: 18rpx;
						color: #fff;
					}
				}
			}

			image {
				width: 76rpx;
			}
		}

		.btnOut {
			border-radius: 64rpx;
			box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(15, 198, 194, 0.25);
		}

		.btn {
			width: 212rpx;
			height: 80rpx;
			box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;
			border-radius: 64rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #2bafad;

			text {
				font-size: 32rpx;
				color: #fff;
			}
		}
	}

	.inputBox {
		padding: 20px 45rpx;
		border-bottom: 1rpx solid #19241e;
		display: flex;
		align-items: center;

		.label {
			width: 100rpx;

			text {
				color: #B3B4C3;
				font-size: 28rpx;
			}
		}

		.value {
			flex: 1;
			color: #fff;
			display: flex;
			justify-content: flex-end;
			font-weight: 500;
			font-size: 28rpx;
			line-height: 28rpx;
			text-align: right;
			font-style: normal;
		}
	}

	video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 确保视频填充整个容器，可能会裁剪视频 */
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 0;
	}

	.operation {
		display: flex;

		text {
			align-items: center;
			color: #fff;
			text-align: center;
		}
	}

	.items {
		margin-bottom: 20rpx;
		margin-top: 38rpx;

		.item {
			padding: 30rpx;
			margin-bottom: 18rpx;
			display: flex;
			background-size: 100% 100%;

			image {
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
				border-radius: 20rpx;
			}

			.info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 10rpx 0;
				margin-left: 36rpx;

				.title {
					font-size: 36rpx;
					color: #fff;
				}

				.price {
					font-weight: 500;
					font-size: 28rpx;
					color: #0FC6C2;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
					display: flex;
					justify-content: space-between;

					image {
						width: 36rpx;
						margin: 0 !important;
					}
				}
			}
		}
	}

	.content {
		position: relative;
		z-index: 99;
		flex: 1;
		box-sizing: border-box;
		padding: 0 32rpx;
	}

	.left-slot {
		color: #fff;
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			margin-right: 30rpx;
		}
	}

	.outBox {
		background-color: #242331;
	}
</style>